<template>
  <el-form label-width="100">
    <el-form-item label="SKU名称">
      <el-input placeholder="请输入SKU名称" v-model="skuParams.skuName"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input type="number" v-model="skuParams.price" placeholder="请输入价格(元)"></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input type="number" v-model="skuParams.weight" placeholder="请输入重量(g)"></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input type="textarea" v-model="skuParams.skuDesc" placeholder="请输入SKU描述"></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form class="elform" label-width="80" :inline="true">
        <el-form-item v-for="item in attrInfoArr" :key="item.id" :label="item.attrName">
          <el-select class="select" v-model="item.attrIdAndValueId">
            <el-option v-for="item1 in item.attrValueList" :key="item1.id" :label="item1.valueName" :value="`${item.id}:${item1.id}`"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form class="elform" label-width="80" :inline="true">
        <el-form-item v-for="item in spuSaleAttrArr" :key="item.id" :label="item.saleAttrName">
          <el-select class="select" v-model="item.saleIdAndValueId">
            <el-option
              v-for="item1 in item.spuSaleAttrValueList"
              :key="item1.id"
              :label="item1.saleAttrValueName"
              :value="`${item.id}:${item1.id}`"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="spuImageArr" ref="tableEle" @selection-change="selectionChange">
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column prop="imgUrl" label="图片" align="center" width="100">
          <template #default="{ row, $index }">
            <img class="img-item" :src="row.imgUrl" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row, $index }">
            <el-button type="primary" size="small" @click="setDefaultValue(row)">设置默认值</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="confirm">保存</el-button>
      <el-button type="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { AttrResponseData } from '@/api/product/attr/types';
import { SkuData, SkuImage } from '@/api/product/sku/types';
import { SpuData } from '@/api/product/spu/types';

const category = useCategoryStore();
// 平台属性
const attrInfoArr = ref<any>([]);
// spu图片
const spuImageArr = ref<SkuImage[]>([]);
// spu销售属性
const spuSaleAttrArr = ref<any>([]);
// table的ref元素
const tableEle = ref();
// 添加sku参数
const skuParams = reactive<SkuData>({
  category3Id: '',
  spuId: '',
  tmId: '',

  skuName: '',
  price: '',
  weight: '',
  skuDesc: '',

  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
  skuDefaultImg: '',
});
// 获取父组件传递过来的方法changeSecene
const emit = defineEmits(['changeSecene']);
// 对外暴露的更新sku加载数据的方法
const initAddSkuData = async (row: SpuData) => {
  skuParams.category3Id = category.c3Id;
  skuParams.spuId = row.id;
  skuParams.tmId = row.tmId;

  if (category.c3Id) {
    const result1: AttrResponseData = await reqGetAttrInfos(category.c1Id, category.c2Id, category.c3Id);
    if (result1.code === 200) {
      attrInfoArr.value = result1.data;
    }
  }

  const result2: any = await reqGetSpuImages(row.id as number);
  if (result2.code === 200) {
    spuImageArr.value = result2.data;
  }
  const result3: any = await reqGetSpuSaleAttrs(row.id as number);
  if (result3.code === 200) {
    spuSaleAttrArr.value = result3.data;
  }
};
// 对外暴露
defineExpose({ initAddSkuData });
// 确定添加sku,一直返回201
const confirm = async () => {
  // 获取选择的sku属性，排除没有选择的
  attrInfoArr.value.forEach((item: any) => {
    if (item.attrIdAndValueId) {
      const [attrId, valueId] = (item.attrIdAndValueId as string).split(':');
      skuParams.skuAttrValueList?.push({
        attrId,
        valueId,
      });
    }
  });
  // 获取选择的销售属性值，排除没有选择的
  spuSaleAttrArr.value.forEach((item: any) => {
    if (item.saleIdAndValueId) {
      const [saleAttrId, saleAttrValueId] = (item.saleIdAndValueId as string).split(':');
      skuParams.skuSaleAttrValueList?.push({
        saleAttrId,
        saleAttrValueId,
      });
    }
  });

  const result: any = await reqAddOrUpdateSku(skuParams);
  if (result.code === 200) {
    ElMessage.success('添加成功');
    emit('changeSecene', {
      flag: 0,
      params: 'update',
    });
  } else {
    ElMessage.error('添加失败');
  }
};
// 取消添加
const cancel = () => {
  emit('changeSecene', {
    flag: 0,
    params: 'update',
  });
};
// 设置默认图片
const setDefaultValue = (row: SkuImage) => {
  spuImageArr.value.forEach((item: any) => {
    tableEle.value.toggleRowSelection(item, false);
  });
  tableEle.value.toggleRowSelection(row, true);
  skuParams.skuDefaultImg = row.imgUrl;
};
const selectionChange = (val: SkuImage[]) => {
  skuParams.skuImageList = val;
};
</script>

<style lang="scss" scoped>
.elform {
  .el-form-item {
    margin: 5px 0;

    .select {
      width: 200px;
      margin-right: 5px;
    }
  }
}
.img-item {
  width: 100%;
  height: 100%;
}
</style>
